<template>
  <div>
    <div style="clear: both"></div>
    <div class="footer">
      <div v-for="item in list" class="footer_list">
        <div style="float: left">
          <img :src="item.img"/>
        </div>
        <div class="footer_text">
          <b style="font-weight: bold">{{item.title}}</b><br>
          {{item.title_sub}}
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
    <div style="border-bottom: 1px solid #ccc;margin-top: 30px"></div>

    <div class="footer_nav">

      <div class="footer_nav_1">
        <b>STOCK & INSURANCE</b>
      </div>
      <div class="footer_nav_2">
        <ul>
          <li v-for="list in footer_nav">
            <div>{{list.title}}</div>
          </li>
        </ul>
      </div>

      <div class="footer_nav_3">
        <ul>
          <li v-for="item in footer_cont">
            <div>{{item.title}}</div>
          </li>
        </ul>
      </div>
      <div class="footer_nav_4">
        <img src="../assets/img/qrCode.png">
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'footertap',
    data () {
      return {
        list: [
          {
            img: require('../assets/img/footer_1.png'),
            title: '大品牌',
            title_sub: '省心安心'
          },
          {
            img: require('../assets/img/footer_2.png'),
            title: '大品牌',
            title_sub: '省心安心'
          },
          {
            img: require('../assets/img/footer_3.png'),
            title: '大品牌',
            title_sub: '省心安心'
          },
          {
            img: require('../assets/img/footer_4.png'),
            title: '大品牌',
            title_sub: '省心安心'
          }
        ],
        footer_nav: [
          {
            title: '主页'
          },
          {
            title: '关于我们'
          },
          {
            title: '贷款专营'
          },
          {
            title: '新闻咨讯'
          },
          {
            title: '联系我们'
          }
        ],
        footer_cont: [
          {
            title: '联系QQ：258506508'
          },
          {
            title: '手机号码：130000000'
          },
          {
            title: '联系邮箱：contact@fkadjkhsf.co'
          },
          {
            title: '联系电话：020-000000    400-000000'
          },
          {
            title: '联系地址：XXX省XXX市XXX县XXX路XXX号'
          }
        ]
      }
    },
    methods: {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .footer{
    /*width: 100%;*/
    height: 70px;
    margin-left: 200px;
    .footer_list{
      width: 200px;
      height: 62px;
      float: left;
      margin-right: 100px;
      .footer_text{
        color: #888;
        font-size: 14px;
        float: left;
        margin-top: 10px;
        margin-left: 20px
      }
    }
  }
  .footer_nav{
    width: 1440px;
    height: 300px;
    .footer_nav_1{
      float: left;
      width: 395px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      margin-left: 100px;
      font-size: 32px;
      color: rgb(0, 160, 233)
    }
    .footer_nav_2{
      float: left;
      width: 200px;
      margin-top: 30px;
      text-align: left;
      ul li{
        padding: 10px;
        font-size: 14px;
        color: rgb(153, 153, 153);
      }
    }
    .footer_nav_3{
      float: left;
      width: 350px;
      margin-top: 30px;
      text-align: left;
      ul li{
        padding: 10px;
        font-size: 14px;
        color: rgb(153, 153, 153);
      }
    }
    .footer_nav_4{
      float: left;
      width: 395px;
      height: 300px;
      text-align: center;
      margin-top: 100px
    }
  }






</style>
